import React from "react";
import './Recommend.scss'
import { Carousel  } from 'element-react/next'
import { GetRecomBanner, GetpPersonalized, GetPrivatecontent, GetNewSong, GetRecomMv } from "../../api/Recommend/Recommend";
import { RightOutlined, CaretRightOutlined } from '@ant-design/icons';
import emitter from "../../event";

class Recommend extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            bannerlist: [],
            height: '180px',
            hotPersonlist: [],
            Exclusivelist: [],
            NewSonglist: [],
            MVlist: [],
        }
        this.showPlayListDet = this.showPlayListDet.bind(this);
    }

    componentDidMount() {
        let Width = document.body.clientWidth
        if(Width > 1200){
            this.setState({
                height: '220px'
            })
        }
        this.GetBanner()
        this.GetHotPerson()
        this.Getexclusive()
        this.GetNewSongList()
        this.GetRecomMvList()
    }

    GetBanner(){
        let params = {
            type: 2
        }
        GetRecomBanner(params).then(res => {
            const { code, banners } = res;
            if(code == 200){
                this.setState({
                    bannerlist: banners
                })
            }
        })
    }

    GetHotPerson(){
        // 获取推荐歌单
        let params = {
            limit: 9
        }
        GetpPersonalized(params).then(res => {
            const { code, result } = res;
            if(code == 200){
                this.setState({
                    hotPersonlist: result
                })
            }else {

            }
        }).catch(() => {

        })
    }

    Getexclusive(){
        // 获取独家放送入口
        GetPrivatecontent().then(res => {
            const { code, result } = res;
            if(code == 200){
                this.setState({
                    Exclusivelist: result
                })
            }else {

            }
        }).catch(() => {

        })
    }

    GetNewSongList(){
        GetNewSong().then(res =>{
            const { code, data } = res;
            if(code == 200){
                this.setState({
                    NewSonglist: data.slice(0,12)  // 推荐页只取12条
                })
            }else {

            }
        }).catch(() => {

        })
    }


    GetRecomMvList(){
        // 获取推荐mv
        GetRecomMv().then(res => {
            const { code, result } = res;
            if(code == 200){
                this.setState({
                    MVlist: result.slice(0,3)
                })
            }else {

            }
        }).catch(() => {

        })
    }

    BannerClick(e){
        // banner 获取id 进行跳转
        console.info(e.target.parentNode.getAttribute('targetid'))
    }

    CompCount(value){
        if(parseInt(value) > 10000){
            return parseInt(value/10000) + '万'
        }else {
            return value
        }
    }

    HotRecommendHover(event){
        let showItem = event.target.parentNode.lastChild
        showItem.style.visibility = 'visible'
        showItem.classList.remove("fade-out");
        showItem.classList.add("fade-in-fwd");
    }

    HotRecommendLeave(event){
        let showItem = event.target.parentNode.lastChild
        showItem.classList.remove("fade-in-fwd");
        showItem.classList.add("fade-out");
    }

    PlaySong(id,item){
        // 播放这个歌曲
        emitter.emit('PlayAudio',id,item);
    }

    showPlayListDet(id){
        this.props.history.push('/PlayList/'+ id);
    }

    render() {
        const BanCarousel = []
        const HotPerson = []
        const Exclusive = []
        const NewSong = []
        const MV = []
        const {
            bannerlist,
            Exclusivelist ,
            hotPersonlist,
            NewSonglist,
            MVlist
        } = this.state

        if(bannerlist.length != 0){
            bannerlist.map((r,index) => {
                BanCarousel.push(
                    <Carousel.Item key={index}>
                        <div onClick={e => this.BannerClick(e)} targetid={r.targetId} className="BannerBox">
                            <img className="BannerImg" src={r.pic} alt=""/>
                            <div className="Banner-Title">{r.typeTitle}</div>
                        </div>
                    </Carousel.Item>
                )
            })
        }


        if(hotPersonlist.length != 0){
            HotPerson.push(
                <div onClick={() =>this.showPlayListDet('recommend')} itemID='recommend' className="HotRecommend-item">
                    <div className="coverImg">
                        <img src="https://p1.music.126.net/7gz6R9DM3uZUQ5uhcb6J2Q==/109951165114238850.jpg?param=140y140" alt=""/>
                        <div className="Enter-Item">
                            <CaretRightOutlined/>
                        </div>
                    </div>
                    <p className="item-title">每日歌曲推荐</p>
                </div>
            )
            hotPersonlist.map((r,index) => {
                HotPerson.push(
                    <div onClick={() =>this.showPlayListDet(r.id)} key={index} itemID={r.id} className="HotRecommend-item">
                        <div className="coverImg">
                            <img src={r.picUrl} alt=""/>
                            <div className="Enter-Item">
                                <CaretRightOutlined/>
                            </div>
                        </div>
                        <p className="item-title">{r.name}</p>
                        <span className="palyCount">
                              <CaretRightOutlined/>{this.CompCount(r.playCount)}
                        </span>

                    </div>
                )
            })
        }

        if(Exclusivelist.length != 0){
            Exclusivelist.map((r,index) => {
                Exclusive.push(
                    <div key={index} itemID={r.id} className="Exclusive-item">
                        <img src={r.sPicUrl} alt=""/>
                        <p className="item-title">{r.name}</p>
                        <div className="Enter-Item">
                            <CaretRightOutlined/>
                        </div>
                    </div>
                )
            })
        }

        if(NewSonglist.length != 0){
            NewSonglist.map((r,index) => {
                let artistslist = [];
                r.artists.map((item,key) => {
                    artistslist.push(
                        <span key={key} artistid={item.id} className="Artists-Name">{item.name}</span>
                    )
                })
                NewSong.push(
                    <div key={index} className="NewSong-item">
                        <div onClick={() => this.PlaySong(r.id,r)} className="Item-img">
                            <img src={r.album.blurPicUrl} alt=""/>
                        </div>
                        <div className="Item-Text">
                            <div className="Text-Top">
                                <span className="Name">{r.name}<span className="bie">{r.alias.length > 0? '('+ r.alias[0]+')'  : ''}</span></span>
                            </div>
                            <div className="Text-artists">
                                { r.exclusive ? <i className="iconfont icon-sq"></i> : ''}
                                { r.mvid ? <i mvid={r.mvid} className="iconfont icon-MV"></i>: '' }
                                {artistslist}
                            </div>
                        </div>
                    </div>
                )
            })
        }


        if(MVlist.length != 0){
            MVlist.map((r,index) => {
                let artistslist = [];
                r.artists.map((item,key) => {
                    artistslist.push(
                        <span key={key} artistid={item.id} className="Artists-Name">{item.name}</span>
                    )
                })
                MV.push(
                    <div key={index} mvid={r.id} className="RecomMv-Item">
                        <img src={r.picUrl} alt=""/>
                        <span className="Mv-name">{r.name}</span>
                        {artistslist}
                    </div>
                )
            })
        }


        return(
            <div className="Recommend">
                <Carousel trigger="click" className="Banner" interval="6000" type="card" height={this.state.height}>
                    {BanCarousel}
                </Carousel>

                <div className="Personalize">
                    <div className="Person-title">
                        推荐歌单 <RightOutlined />
                    </div>
                    <div className="Personal-Box">
                        {HotPerson}
                    </div>
                </div>


                <div className="Exclusive">
                    <div className="Exclusive-title">
                        独家放送 <RightOutlined />
                    </div>
                    <div className="Exclusive-Box">
                        {Exclusive}
                    </div>
                </div>


                <div className="NewSong">
                    <div className="NewSong-title">
                        最新音乐 <RightOutlined />
                    </div>
                    <div className="NewSong-Box">
                        {NewSong}
                    </div>
                </div>


                <div className="RecomMv">
                    <div className="RecomMv-title">
                        推荐MV <RightOutlined />
                    </div>
                    <div className="RecomMv-Box">
                        {MV}
                    </div>
                </div>


            </div>
        )
    }
}

export default Recommend